<script setup>
import { ref } from 'vue'
//利用ref,把简单类型的数据生成响应式对象
/* const count = ref(0)
const changeCount = () => {
//在script使用ref生成响应式对象，如果想访问这个对象的原始值，必须加.value,其中ref(0)这个0是初始值，用.value也能获得这个值，后面用count.value++是更改这个value值
//但是在模板中使用响应对象不用加.value
  //console.log(count.value)
  count.value++
} */
//用ref生成复杂响应数据
const state = ref({count: 0})
const changeCount = () => {
  state.value.count++
}
</script>
<template>
  <!-- <div>
    count:{{ count }}
  </div> -->
  <div>count: {{ state.count }}</div>
  <button @click="changeCount">count++</button>
</template>

<style lang="scss" scoped>

</style>
